<template>
  <div class="container">
    <div class="login">
      <div class="title">系统登录</div>
      <div class="username">
        用户名:  &nbsp;&nbsp;<input type="text" v-model="loginForm.username" placeholder="请输入用户名"/> </div>
      <br><br>
      <div class="pwd">
        密码：   &nbsp;&nbsp; <input type="password"  v-model="loginForm.password" placeholder="请输入密码"/>
      </div>
      <br>
<!--      <p class="rem"><input type="checkbox" />: 是否记住密码</p>-->
    <br>
      <button class="loginbut" v-on:click="login">登录</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data () {
    return {
      loginForm: {
        username: '',
        password: ''
      },
      responseResult: []
    }
  },
  methods: {
    login (){

    }
  }
}
</script>

<style lang="less" scoped>
.container{
  background:url(../assets/images/loginbg.jpg) no-repeat;
  // background-position: center;
  height: 102%;
  width: 102%;
  left: 0;
  top: 0;
  background-size: cover;
  position: fixed;
  .login{
    position: absolute;
    width: 25rem;
    height: 18rem;
    margin-top: 10%;
    left: 50%;
    padding: 20px;
    margin-left: -12.5rem;
    background-color: white;
    border: 1px solid #dceac6;
    box-shadow: 0 0 25px #fffee7;
    .title{
      font-size: 1.5rem;
      font-weight: bolder;
      color: #00556d;
      letter-spacing: 10px;
      margin-bottom: 30px;
    }
    .username .pwd{
      font-size: 1.125rem;
      // margin: 0 0 35px 0;
      input{
        // padding: 0 10px;
        margin-left: 0.625rem;
      }
    }
    .loginbut{
      margin-top: 5px;
      background-color: #94c369;
      color: white;
      width: 36%;
      height: 12%;
      border-radius: 20px;
      border-color: #cccccc;
    }
    .rem{
      font-size: 0.5rem;
      text-align: center;
    }

  }
}
</style>
